<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/mescroll.min.css">
		<link href="css/iconfont.css" rel="stylesheet" />
		<link href="css/base.css" rel="stylesheet" />
		<link href="css/index.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #fff;
			}
		</style>
	</head>

	<body>
		<div id="bcid-wrap">
			<div id="bcid"></div>
			<button id="cancelBtn" type="button" class="mui-btn">取消扫码</button>
			<button id="openFlash" type="button" class="mui-btn">打开手电筒</button>
		</div>
		<div id="mescroll" class="mescroll">
			<!--搜索框-->
			<div class="top-container">
				<div class="mui-input-row mui-search searchBox">
					<input type="search" class="mui-input-clear" placeholder="搜索商品">
				</div>
				<span id="camera" class="mui-icon mui-icon-camera"></span>
			</div>
			<!--轮播图-->
			<div class="swiper-container banner-swiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="images/banner1.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img src="images/banner0.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img src="images/banner2.jpg" alt="">
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
				<!-- 如果需要导航按钮 -->
				<!--<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>-->
			</div>
			<!--导航区-->
			<div class="nav-container">
				<ul>
					<li>
						<a href=""><i class="nav-icon icon-lingshi"></i><span>零食</span></a>
					</li>
					<li>
						<a href=""><i class="nav-icon icon-yinliao"></i><span>饮料</span></a>
					</li>
					<li>
						<a href=""><i class="nav-icon icon-shuiguo"></i><span>水果</span></a>
					</li>
					<li>
						<a href=""><i class="nav-icon icon-jinkou"></i><span>进口</span></a>
					</li>
					<li>
						<a href=""><i class="nav-icon icon-xuegao"></i><span>其他</span></a>
					</li>
				</ul>
			</div>
			<!--新闻区-->
			<div class="news-container">
				<div class="news-title"></div>
				<div class="news-warp">
					<div class="swiper-container news-swiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<a href="">
									<div>
										<span>精华</span>
										<p class="mui-ellipsis">92号汽油将被取代，新汽油上市又要涨价新汽油上市又要涨价新汽油上市又要涨价</p>
									</div>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="">
									<div>
										<span>精华</span>
										<p class="mui-ellipsis">定了！小米发布会：小米7+8，月底见！</p>
									</div>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="">
									<div>
										<span>精华</span>
										<p class="mui-ellipsis">5月10日，华为再上新机！无奈：又火了</p>
									</div>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="">
									<div>
										<span>精华</span>
										<p class="mui-ellipsis">小米7定档5.27！取消指纹识别功能</p>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="news-images">
					<b></b>
					<img src="images/news-image.jpeg" alt="" />
				</div>
			</div>
			<!--内容区-->
			<div class="content-container">
				<!--主打商品-->
				<div class="featured-wrap">
					<div class="left-wrap">
						<a href="">
							<img src="images/demo1.jpg" alt="" />
							<p>天喔麻辣豆干</p>
						</a>
					</div>
					<div class="right-wrap">
						<div>
							<a href="">
								<img src="images/demo2.jpg" alt="" />
								<p>天喔芒果干</p>
							</a>
						</div>
						<div>
							<a href="">
								<img src="images/demo3.jpg" alt="" />
								<p>天喔俏话梅</p>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/util.js"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/mescroll.min.js"></script>
		<script type="text/javascript">
			(function() {
				mui.init({
					swipeBack: true, //启用右滑关闭功能
				});
				var searchList = [
						'热卖零食了解一下',
						'夏季畅销的爆品饮料是什么',
						'你从来没见过的进口食物',
						'夏天除了西瓜还有什么好吃的水果'
					],
					searchIndex = 0,
					searchLen = searchList.length;
				var timer = setInterval(function() {
					searchIndex++;
					searchIndex = searchIndex > searchLen ? 0 : searchIndex;
					$(".searchBox .mui-placeholder span:last-child").html(searchList[searchIndex]);
				}, 4000)
				var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
					//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
					//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
					down: {
						offset: 60,
						callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
					},
					//					up: {
					//						callback: upCallback, //上拉加载的回调
					//						isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
					//					}
				});

				function downCallback() {
					setTimeout(function() {
						mescroll.endSuccess();
					}, 2000)
				}

				function upCallback() {

				}
				//轮播图
				var bannerSwiper = new Swiper('.banner-swiper', {
					loop: true, //循环轮播
					autoplay: 3000, //自动播
					autoplayDisableOnInteraction: false, //用户手动滑动后不禁止自动播放
					speed: 300, //速度
					initialSlide: 0, //初始第几张
					effect: "", //切换效果
					grabCursor: true, //鼠标变手

					pagination: '.swiper-pagination', // 如果需要分页器
					paginationClickable: true, //点击分页控制滚动

					nextButton: '.swiper-button-next', // 如果需要前进后退按钮
					prevButton: '.swiper-button-prev',
				});
				//新闻
				var newsSwiper = new Swiper('.news-swiper', {
					loop: true, //循环轮播
					autoplay: 3000, //自动播
					autoplayDisableOnInteraction: false, //用户手动滑动后不禁止自动播放
					speed: 300, //速度
					direction: 'vertical', //垂直滑动
					slidesPerView: 2 //同时显示2个
				});
				mui.plusReady(function() {
					var scan;
					$("#camera").click(function() {
//						var cmr = plus.camera.getCamera(); //获取照相机对象
//						var res = cmr.supportedImageResolutions[0];
//						var fmt = cmr.supportedImageFormats[0];
//						alert(cmr);
//						cmr.captureImage(
//							function(path) {
//								alert(path);
//							},
//							function(err) {
//								alert(err);
//							}, {
//								resolution: res,
//								format: fmt
//							}
//						)
						var listArr = [{
							title: "扫一扫"
						}, {
							title: "从本地相册获取"
						}]
						plus.nativeUI.actionSheet({
							title: "扫码",
							cancel: "取消",
							buttons: listArr
						}, function(e) {
							var index = e.index - 1;
							if(index == 0) {
								$("#bcid-wrap").show();
								scan = new plus.barcode.Barcode('bcid');
								scan.start({
									vibrate:true,
									sound:true
								});
								scan.onmarked = function(type, code, file) {
									var result = code;
									plus.nativeUI.alert(result, function() {
										$("#bcid-wrap").hide();
										scan.close();
									}, "扫码结果", '好的');
								};
								scan.onerror = function(error) {
									var result = error;
									plus.nativeUI.alert(result, function() {
										$("#bcid-wrap").hide();
										scan.close();
									}, "扫码结果", '好的');
								};
							} else if( index == 1 ) {
								var imgUrl = null;
								plus.gallery.pick( function(path){
									imgUrl = path.substring(7);
									imgUrl = plus.io.convertAbsoluteFileSystem(imgUrl);
									if(imgUrl != ''){
										plus.barcode.scan(imgUrl, function(type, result) {
											plus.nativeUI.alert(result, function() {}, "扫码结果", '好的');
										}, function(error) {
											alert(error.message);
										});
									}
								});
							}
						});
					})
					var lock = true;
					$("#openFlash").click(function() {
						scan.setFlash(lock);
						lock = !lock;
					})
					$("#cancelBtn").click(function() {
						$("#bcid-wrap").hide();
						scan.close();
					})
					var self = plus.webview.currentWebview();

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);

					var nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(), //当前页面
						targetPage, //指向页面
						subpages = util.options.subpages, //所有子页面的数组
						pageW = window.innerWidth, //屏幕的宽度
						currIndex = 0;

					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.2)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.2) && clientX <= parseInt(pageW * 0.4)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.4) && clientX <= parseInt(pageW * 0.6)) {
							currIndex = 2;
						} else if(clientX > parseInt(pageW * 0.6) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 3;
						} else {
							currIndex = 4;
						}
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) { //指向页面为当前页面,不操作
							return;
						}

						if(currIndex !== 4) { //判断是否打开新窗口
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
						} else {
							//第四个tab 打开新窗口
							plus.webview.open('html/new-webview.html', 'new', {}, 'slide-in-right', 200);
						}
					});
				});
			})();
		</script>
	</body>

</html>